<template>
  <div>
    <el-input
      placeholder="请输入文章标题"
      v-model="articlename"
      clearable
      maxlength="30"
      show-word-limit
      style="width: 340px; margin-left: 25%"
    >
    </el-input>
    <el-select
      v-model="value"
      clearable
      placeholder="请选择科目"
      style="margin-left: 5%"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-input
      placeholder="请署名"
      v-model="writer"
      clearable
      style="width: 200px; margin-left: 32%; margin-top: 2%"
    >
    </el-input>
    <el-input
      type="textarea"
      :autosize="{ minRows: 25, maxRows: 30 }"
      placeholder="请输入内容"
      v-model="articletext"
      @keyup.enter.native="addline"
      style="margin-top: 3%"
    >
    </el-input>
    <div style="margin-left: 10%; margin-top: 1.5%">
      <el-button type="primary" plain @click="chongxin">重新编辑</el-button>
      <el-button
        type="primary"
        plain
        @click="subArticle"
        style="margin-left: 60%"
        >提交</el-button
      >
    </div>
  </div>
</template>
<script>
import axios from "axios";
import commons from "../../assets/commons";
export default {
  data() {
    return {
      //文章名字
      articlename: "",
      //这个绑定的是input框里面的
      articletext: "",
      //这个是传回数据库的
      content: "",
      //作者名字
      writer: "",
      article: {},
      options: [
        {
          value: "1",
          label: "语文",
        },
        {
          value: "2",
          label: "数学",
        },
        {
          value: "3",
          label: "英语",
        },
        {
          value: "4",
          label: "政治",
        },
        {
          value: "5",
          label: "历史",
        },
        {
          value: "6",
          label: "地理",
        },
        {
          value: "7",
          label: "物理",
        },
        {
          value: "8",
          label: "化学",
        },
        {
          value: "9",
          label: "生物",
        },
      ],
      value: "",
    };
  },
  methods: {
    chongxin() {
      this.articlename = "";
      this.articletext = "";
      this.content = "";
      this.writer = "";
      this.value=""
    },
    //监听回车事件,当回车触发时,
    //截取content然后在字符串后面加个/n
    //然后赋值给articletext
    addline() {
      this.content =
        this.content +
        this.articletext.substring(this.content.length - 3) +
        "\\n";
      console.log(this.content);
    },
    subArticle() {
      this.addline();
      this.content = "\\n" + this.content;
      /**
       * 在前端将文章封装好直接传到后台传入数据库
       */
      //文章名字
      this.article.article_name = this.articlename;
      //文章作者
      this.article.writer = this.writer;
      //上传时间
      this.article.upload_time = new Date();
      //科目
      this.article.type = this.value;
      //内容
      this.article.content = this.content;
      //阅读人数
      this.article.view_num = 1;
      //收藏人数
      this.article.collection_num = 0;
      //状态
      this.article.state = 0;
      console.log(this.article);
      axios
        .post(commons.baseUrl + "gradedean/addArticle", this.article, {
          headers: { "Content-Type": "application/JSON" },
        })
        .then((res) => {
          if (res.data == true) {
             alert("上传成功")
            this.chongxin()
          }
          else{
            alert("上传失败")
          }
        });
    },
  },
};
</script>
<style scoped></style>
